<template>
	<!-- 轮播图 -->
	<view class="container">
		<!-- 轮播 -->
		<swiper class="swiper" :autoplay="true" :interval="3000":duration="1000" :current="swiperCurrent" @change="changeSwiper">
			<swiper-item v-for="item in swiperImg" :key="item.id">
				<image class="swiper-item" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播指示点样式修改 -->
		<view class="dots">
			<block v-for="(item,index) in swiperImg.length" :key="item">
				<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
			</block>
		</view>

	</view>
	<!-- 轮播图 end -->
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图属性 start
				swiperImg: [
					'../../../static/img/1.jpg',
					'../../../static/img/2.jpg',
					'../../../static/img/1.jpg',
					'../../../static/img/2.jpg'
				],
				current: 0,
				swiperCurrent: 0,
				// 轮播图属性 end
				// list: [{
				// 		title: '2019年1月',
				// 		pic: '../../../static/img/1.jpg',
				// 	},
				// 	{
				// 		title: '2019年2月',
				// 		pic: '../../../static/img/1.jpg',
				// 	}
				// ]
			};
		},
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;

		.swiper {
			width: 750rpx;
			height: 300rpx;
			// border-radius: 16rpx;
			overflow: hidden;
			// margin-top: 16rpx;
			position: relative;
			// margin-left: 26rpx;

			.swiper-item {
				width: 750rpx;
				height: 240rpx;
			}

		}

		.dots {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.dot {
				width: 18rpx;
				height: 18rpx;
				border-radius: 18rpx;
				transition: all .6s;
				background: rgba(0, 0, 0, .3);
				margin-right: 10rpx;
			}

			.active {
				width: 18rpx;
				height: 18rpx;
				border-radius: 18rpx;
				background: rgba(255, 255, 255, .8);
			}
		}

		.xumu {
			position: absolute;
		}
	}
</style>
